import React, { Component } from 'react';
import {connect} from 'react-redux';
import {del} from "../actions/todos";

class List extends Component{
	render(){
		console.log( this.props.todos )
		return (
			<div>
				<h3>List</h3>
				<hr />
				<ul>
				{
					this.props.todos.map( (item,index)=>(
						<li key={index}>
							<header onClick = {e=>this.props.dispatch( del(item.title) )}>{item.title}</header>
							<div>{item.content}</div>
						</li>
					) )
				}
				</ul>
			</div>

		)
	} 
}
export default connect((state)=>{
	return {todos:state.todos}
})(List);